<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		    .html()       无参---功能：获取匹配元素中第一元素
			                有参---功能：将匹配元素集合中所有元素替换为新元素
			特点：针对  内容  +  元素			
			.val()          无参---功能：表单内元素：input\select生效
			                             获取表单元素中第一元素的内容
										 
			                有参---功能：【设置】表单内元素：input\select生效
							           input元素直接显示 value
									   select元素不是直接显示 value
									   option 元素中内容：用户显示
									   option 元素中value值，
									   必须当前select中，option元素value值
									   直接赋值：打印select元素对象名称[object Object]
									   
			特点：针对  （表单内form元素可以包裹） 元素的内容
			.text()                    无参---功能：获取匹配元素集合所有文本内容
			                           有参---功能：【设置】匹配元素集合中所有元素的文本
									              内容置换
			  -->
			  
			  <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		        <button>按钮-针对html()函数-有参</button>
		        <span>lorem1</span>
		        <span>lorem2</span>
		        <h1>val()函数使用</h1>
		        <button>按钮-针对val()函数-无参</button>
		        <input type="text" value="文本真实数据1"/>
		        <input type="text" value="文本真实数据2" placeholder="输入框显示效果[提示]"/>
		        <button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem1">lorem2</option>
			<option value="rem1">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorme4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		
		
		<script>
			//1.找到  类名为 btn1的按钮--点击---弹窗内容 三个p元素内容【无参】
			$(".btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});			
			//2.找到  类名为 btn2的按钮--点击---lorem4/5/6 改成 “修改文本”【有参】
			$(".btn2").click(function(){
				$("p").text("修饰文本")
			});
			
			
			
			
			
			
		    //$("button").click(function(){
		     //设置元素第一个的值  1.直接设置下拉列表中的value值
		      //$("select").val("rem5");
		      //设置元素第一个的值  2.给第一个值添加，设置内容
		      //var rem=$("select").val();
		     //[object Object] JavaScript中 对象的默认字符串表示形态
		     //select元素 对象 输出[object Object]   
		                
		     //value的值：真实数据  option中值：显示数据
		     //object Object  测试  无参
		     //alert("val()函数有参："+rem)
		    //});
		     //动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
		     /* $("button").click(function(){
		         /* 注意：js变量名不可以为关键字！    in是关键字 */
		    //        var ins=$("input").val();
		    //        alert("val()函数无参："+ins)
		    //    }); */
		            
		    //有参：点击按钮--下面有两个span  改成 lorem、lorem
		    //    $("button").click(function(){
		    //        $("span").html("<span>lorem</span>")
		     //    });
		            
		    //js变量【var i=1】==jq变量    var   变量名=值、元素
		    //无参数     html()函数使用
		    /* var html=$("span").html();
		    //BOM方式  打印数据
		    alert("无参数获取第一个元素内容："html); */
		    </script>
		</body>
	</html>